<template>
	<view class="container">
		<NavBar title="添加安全动态监测"/>
		<scroll-view scroll-y class="list" >
			<view class="list-item">
				<view class="item-left">
					排查日期
				</view>
				<view class="item-right select" @click="handleOutClick">
					<uv-text v-show="!form.checkDate" suffixIcon="arrow-down-fill" text="请选择排查日期"></uv-text>
					<text v-show="form.checkDate">{{form.checkDate}}</text>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					整改责任人
				</view>
				<view class="item-right">
					<uv-input class="input" v-model="form.changeName" placeholder="请输入整改责任人" border="surround" clearable ></uv-input>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					联系方式
				</view>
				<view class="item-right">
					<uv-input class="input" v-model="form.changeMobile" placeholder="请输入联系方式" border="surround" clearable ></uv-input>
				</view>
			</view>
			<view class="list-item textarea">
				<view class="item-left">
					隐患描述
				</view>
				<view class="item-right item-box">
					<uv-textarea v-model="form.dangerDesc" count placeholder="请输入隐患描述"></uv-textarea>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					等级
				</view>
				<view class="item-right">
					<view class="input-text" @click="unitadd">
						
						<uv-text v-show="!form.dangerLevel" suffixIcon="arrow-down-fill" iconStyle="font-size: 8px" text="请选择"></uv-text>
						<text v-show="form.dangerLevel">{{form.dangerLevel}}</text>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					整改前照片
				</view>
				<view class="imgfile-box" >
					<!-- <image v-show="imgList.length!==0" v-for="item in imgList" class="imgfile" :src="item" mode="heightFix"></image> -->
					<view class="imgfile wrap__preview" v-show="imgFile.length!==0" v-for="(item,index) in imgFile" :key="index">
						<image  class="imgfile" :src="item" mode="scaleToFill"></image>
						<view class="deletable" @click="deletePic(index)">
							<uv-icon name="close" size="10px" color="#fff"></uv-icon>
						</view>
					</view>
					<view v-show="imgList.length<5" class="plus-icon" @click="chooseImage">
						<uv-icon name="plus"></uv-icon>
					</view>
				</view>
			</view>
			
			<view class="black-plack">
				
			</view>
		</scroll-view>
		
	</view>
	<uv-calendars ref="datetimePicker" @confirm="confirm" />
	<view class="but" @click="submitForm">
		提交
	</view>
	<view v-if="isShow" class="picker-container">
	  <view class="picker-mask" @click="closeOutPicker()"></view>
	  <view class="picker-content">
	    <view class="picker-header">
	      <text class="picker-cancel" @click="closeOutPicker()">取消</text>
	      <text class="picker-title">选择等级</text>
	      <text class="picker-confirm" @click="confirmOut()">确定</text>
	    </view>
	    <scroll-view scroll-y class="picker-list">
	      <view  class="picker-item" v-for="(item, index) in unitarr"  :key="index" 
	            :class="{ 'selected': unit === item }"
	            @click="selectOutOption(item)">
	        <text>{{ item }}</text>
	      </view>
		  <view class="black-box">
		  	
		  </view>
	    </scroll-view>
		
	  </view>
	</view>
</template>

<script>
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import NavBar from '@/components/NavBar/index.vue'
	import {addMonitor,updateMonitor,detailMonitor } from '@/utils/app.js'
	import { BASEURL } from '@/utils/request.js'
	export default {
		components:{NavBar},
		data() {
			return {
				imgList:[],
				imgFile:[],
				tempFile:[],
				maxNum:5,
				projectId:'',
				form: {
				  checkDate:'',
				  changeName:'',
				  changeMobile:'',
				  dangerLevel:'',
				  dangerDesc:'',
				  changeFrontImg:''
				},
				unitarr:['A','B','C','D'],
				value:Number(new Date()),
				unit:'',
				isUpdate:true,
				isShow:false
			};
		},
		watch:{
			'imgList.length':function(newLength, oldLength){
				console.log(newLength, oldLength);
				this.maxNum =5- newLength
			}
			
		},
		onLoad(option) {
			// const data = JSON.parse(option.data)
			console.log(option);
			if(option.id){
				this.detailMonitorList(option.id)
				this.isUpdate = false
			}else{
				this.projectId = option.projectId
				console.log(2222);
			}
			
		},
		methods:{
			//删除附件
			deletePic(index) {
				// console.log(event.name,this.fileList,this[`fileList${event.name}`]);
			    this.imgFile.splice(index, 1)
				this.imgList.splice(index, 1)
			},
			selectOutOption(e){
				this.unit = e
				// this.form.dangerLevel = e
			},
			confirmOut(){
				this.form.dangerLevel = this.unit
				this.isShow = false
			},
			closeOutPicker(){
				if(this.form.dangerLevel==''){
					this.unit = ''
				}
				
				this.isShow = false
			},
			detailMonitorList(e){
				detailMonitor(e).then(res=>{
					console.log(res);
					if(res.code ==200){
						
						this.form=res.data
						if(this.form.changeFrontImg=="") return
						this.imgList = this.form.changeFrontImg.split(',')
						this.imgFile = this.form.changeFrontImg.split(',')
					}
				})
			},
			confirm(date){
				this.form.checkDate = date.fulldate
			},
			handleOutClick(){
				this.$refs.datetimePicker.open();
			},
			unitadd(){
				
				// if(this.form.dangerLevel!=''){
				// 	this.unit = this.form.dangerLeve
					
				// 	console.log(11111);
				// }
				this.isShow = true
				// const itemList = this.unitarr
				// uni.showActionSheet({
				//     itemList,
				//     success: (res) => {
				//         this.form.dangerLevel = this.unitarr[res.tapIndex];
				//     }
				// })
			},
			// 选择图片
			chooseImage(){
				const that = this
				uni.chooseImage({
					count: this.maxNum, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res)=> {
						console.log(res.tempFilePaths);
						that.tempFile=[...res.tempFilePaths]
						const token = uni.getStorageSync("token");
						that.tempFile.forEach(item=>{
							if(item.split(':')[0]!='file'){
								let p = plus.io.convertLocalFileSystemURL(item); 
								that.imgFile.push('file://'+  p)
								 uni.uploadFile({
								     url: `${BASEURL}/common/upload`, 
								      filePath:  'file://'+  p,
								 	  header: {
								 	   'Authorization': token,
								 	  },
								      name: 'file',
								      success: (uploadFileRes) => {
								          // console.log(JSON.parse(uploadFileRes.data).annexUrl);
								 		  this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
								         // 获取上传服务器的地址 
								      }
								  });
							}else{
								that.imgFile.push(item)
								  uni.uploadFile({
								      url: `${BASEURL}/common/upload`, 
								       filePath:  item,
									   header: {
									    'Authorization': token,
									   },
								       name: 'file',
								       success: (uploadFileRes) => {
								           // console.log(uploadFileRes.data.annexUrl);
										   this.imgList.push(JSON.parse(uploadFileRes.data).annexUrl)
								          // 获取上传服务器的地址
								       }
								   });
							}
						
						})
						console.log(that.imgFile);
						console.log(result);
						
					}
				});
			},
			submitForm() {
			  // 表单验证
			  if (!this.form.checkDate) {
			    uni.showToast({
			      title: '请选择排查日期',
			      icon: 'none'
			    });
			    return;
			  }
			  
			  // if (!this.form.changeName) {
			  //   uni.showToast({
			  //     title: '请输入整改联系人',
			  //     icon: 'none'
			  //   });
			  //   return;
			  // }
			  
			  // if (!this.form.changeMobile) {
			  //   uni.showToast({
			  //     title: '请输入联系方式',
			  //     icon: 'none'
			  //   });
			  //   return;
			  // }
			  
			  if (!this.form.dangerDesc) {
			    uni.showToast({
			      title: '请输入隐患描述',
			      icon: 'none'
			    });
			    return;
			  }
			  if (!this.form.dangerLevel) {
			    uni.showToast({
			      title: '请选择等级',
			      icon: 'none'
			    });
			    return;
			  }
			  this.form.changeFrontImg = this.imgList.join(',') 
			  if(!this.isUpdate){
				  delete this.form.changeDate
				  updateMonitor({...this.form,type:1}).then(res=>{
				  		if(res.code==200){
				  		  uni.showToast({
				  		    title: '成功',
				  		    icon: 'none'
				  		  });
						  uni.navigateBack()
						}
				  })
			  }else{
				  addMonitor({...this.form,projectId:this.projectId}).then(res=>{
				  	 if(res.code==200){
			 	       uni.showToast({
			 	         title: '成功',
			 	         icon: 'none'
			 	       });
			 	       this.form={}
			 	       this.imgList = []
			 	       this.imgFile = []
			 	       this.tempFile = []
			 	       this.maxNum = 5
			 	       uni.navigateBack()
				  	 }
				  })
			  }
			  
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
.list{
	height: calc(100vh - 180rpx);
	padding: 0 30rpx;
	background-color: #fff;
	.black-plack{
		height: 300rpx;
	}
	
	.imgfile{
		height: 100rpx;
		width: 100rpx;
		margin-right: 8rpx;
	}
	.wrap__preview{
		position: relative;
	}
	.deletable{
		position: absolute;
		top: 0;
		right: 0;
		width: 28rpx;
		height: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom-left-radius: 100px;
		background-color: #373737;
	}
	.imgfile-box{
		display: flex;
	}
	.plus-icon{
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #E6EAF3;
		border-radius: 10rpx;
	}
	.list-item{
		display: flex;
		align-items: center;
		height: 112rpx;
		border-bottom: 1rpx solid #C9CDD4;
		font-size: 30rpx;
		
		.select{
			display: flex;
			align-items: center;
			padding-left: 28rpx;
		}
		.item-left{
			margin-right: 32rpx;
			width: 160rpx;
		}
		
		.item-right{
			flex: 1;
		}
		.item-box{
			display: flex;
			align-items: center;
			
			text{
				width: 160rpx;
			}
		}
		.input-text{
			margin-left: 24rpx;
			font-size: 30rpx;
			color: rgb(48, 49, 51)
		}
		.input{
			border: 0;
		}
	}
	.textarea{
		height: 200rpx;
	}
}
/* 修改底部弹出层部分 */
	.picker-container {
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  top: 0;
	  z-index: 100;
	}
	
	.picker-mask {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.4);
	}
	
	.picker-content {
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #FFFFFF;
	  border-top-left-radius: 16px;
	  border-top-right-radius: 16px;
	}
	
	.picker-header {
	  display: flex;
	  height: 53px;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 16px;
	  border-bottom-width: 1px;
	  border-bottom-color: #EEF2F9;
	  margin-bottom: 30rpx;
	}
	
	.picker-title {
	  font-size: 16px;
	  color: #1D2129;
	  font-weight: 400;
	}
	
	.picker-cancel, .picker-confirm {
	  font-size: 16px;
	}
	
	.picker-cancel {
	  color: #86909C;
	}
	
	.picker-confirm {
	  color: #165DFF;
	}
	
	.picker-list {
	  padding: 24rpx 0;
	  max-height: 350rpx;
	  /* overflow: scroll; */
	}
	
	.picker-item {
		display: flex;
	  height: 44px;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  padding: 0 16px;
	}
	
	.picker-item text {
	  font-size: 16px;
	  color: #1D2129;
	}
	.selected{
		background-color: #EEF2F9;
	}
	
	.but{
		position: fixed;
		bottom:60rpx;
		left: 60rpx;
		width: 630rpx;
		height: 88rpx;
		border-radius: 88rpx;
		font-size: 28rpx;
		line-height: 88rpx;
		text-align: center;
		color: #165DFF;
		background-color: #E8F3FF;
	}
	/* 修改底部弹出层部分 */
		.picker-container {
		  position: fixed;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  top: 0;
		  z-index: 11000;
		}
		
		.picker-mask {
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: rgba(0, 0, 0, 0.4);
		}
		
		.picker-content {
		  position: absolute;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  height: 500rpx;
		  background-color: #FFFFFF;
		  border-top-left-radius: 16px;
		  border-top-right-radius: 16px;
		}
		
		.picker-header {
		  display: flex;
		  height: 53px;
		  flex-direction: row;
		  justify-content: space-between;
		  align-items: center;
		  padding: 0 16px;
		  border-bottom-width: 1px;
		  border-bottom-color: #EEF2F9;
		  margin-bottom: 30rpx;
		}
		
		.picker-title {
		  font-size: 16px;
		  color: #1D2129;
		  font-weight: 400;
		}
		
		.picker-cancel, .picker-confirm {
		  font-size: 16px;
		}
		
		.picker-cancel {
		  color: #86909C;
		}
		
		.picker-confirm {
		  color: #165DFF;
		}
		
		.picker-list {
		  padding: 24rpx 0;
		  max-height: 350rpx;
		  /* overflow: scroll; */
		}
		
		.picker-item {
			display: flex;
		  height: 44px;
		  flex-direction: row;
		  justify-content: center;
		  align-items: center;
		  padding: 0 16px;
		  overflow: hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		}
		.selected{
			background-color: #E8F3FF;
		}
		.black-box{
			height: 50rpx;
		}
		.picker-item text {
		  font-size: 16px;
		  color: #1D2129;
		}
</style>
